<template>
	<view>
		<view class="title">
			等待支付
		</view>
		<navigator url="../../address/address">
			<view class="dizhi">
				<view class="on">
					tel:{{address.tel}}
				</view>
				<view class="under" style="font-size: 20rpx;">
					收货地址:{{address.cityStr}}{{address.cityBak}}
				</view>
			</view>
		</navigator>
		<view class="shopdetail">
			<view class="top">
				<view class="left">
					订单编号:123456
				</view>
				<view class="right">
					等待支付
				</view>
			</view>
			<view class="shop">
				<view class="mid" v-for="item in castshoplist.orderDetailList" :key="item.id">
					<view class="mid-img">
						<image style="width: 170rpx; height: 170rpx;" :src="item.cover_img" mode=""></image>
					</view>

					<view class="mid-right">
						<view class="right-top">
							<view>
								{{item.gname}} <br>
								编号:{{item.sku_code}}<br>
								规格:{{item.color_text}}
							</view>
							<view>
								¥{{item.price/100}}<br>
								X{{item.count}}
							</view>

						</view>

					</view>

				</view>

				<view style="margin-left: 500rpx;" class="allprice">
					合计:¥{{castshoplist.price/100}}
				</view>

				<view class="gopay" @click="gopay">
					确认付款
				</view>


			</view>

		</view>

	</view>
</template>

<script>
	import HomeApi from '@/api/mine/index.js'
	export default {
		name: 'pay',
		data() {
			return {
				castshoplist: [],
				address: [],

			}
		},
		methods: {
			gopay() {
				var skulist = {}
				for (var i = 0; i < this.castshoplist.orderDetailList.length; i++) {
					var sku = this.castshoplist.orderDetailList[i];
					skulist['orderDetail['+i+'].skuId'] = sku.skuId
					skulist['orderDetail['+i+'].price'] = sku.price
					skulist['orderDetail['+i+'].count'] = sku.count
                     
				}
			
				var postData = {
					userId: this.castshoplist.userId,
					addressId: this.address.id,
					count: this.castshoplist.count,
					freight: this.castshoplist.freight,
					price: this.castshoplist.price,
					...skulist
				}
				HomeApi.addOrderBatch(postData).then((res) => {
					if (res.data.code == 'S') {
						uni.showToast({
							title: '跳转中',
							duration: 2000
						});
						uni.navigateTo({
							url: '../order?id=' + res.data.orderId
						});
					} else {
						uni.showToast({
							title: '请重试',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			}
		},
		onLoad() {

		},
		created() {
			this.address = uni.getStorageSync('address_key');
			this.castshoplist = uni.getStorageSync('pay_shop');
			console.log(this.castshoplist)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1ece7;
	}

	.title {
		width: 80%;
		height: 50rpx;
		margin: 20rpx auto;
		font-size: 40rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid;
	}

	.dizhi {
		width: 80%;
		height: 100rpx;
		margin: 20rpx auto;
		font-size: 30rpx;
		border-bottom: 1px solid;
	}

	.shopdetail {
		width: 90%;
		height: 700rpx;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 30rpx;

		.top {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			height: 40rpx;
			line-height: 70rpx;
			padding-bottom: 40rpx;
			border-bottom: 1px solid;
			overflow: hidden;

			text-overflow: ellipsis;

			white-space: nowrap;


		}

		.shop {
			width: 100%;
			margin: 0 auto;
			height: 500rpx;
			background: #fff;
		}

		.mid {
			width: 90%;
			margin: 0 auto;
			height: 200rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			border-bottom: 1px solid;

		}
	}

	.mid-right {
		width: 100%;
	}

	.gopay {
		margin-left: 500rpx;
		border: 1px solid;
		width: 160rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.right-top {
		width: 100%;
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
	}
</style>
